<template>
	<view class="mainbgc" v-if="pageshow">
		<view class="content">
			<u-swiper :list="list4" keyName="url" @change="e => currentNum = e.current" circular autoplay
				height="450rpx" v-if="type==0" indicator indicatorMode="line" circular indicatorStyle="right: 20px"
				@click="previewimg(currentNum,list4)">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text"
						style="color: #fff;">{{ currentNum + 1 }}/{{ list4.length }}</text>
				</view>
			</u-swiper>
			<u-swiper :list="dataAll.video_url_text" keyName="url" :autoplay="false" height="450rpx" v-if="type==1">
			</u-swiper>
			<view class="centertop flexbetween" @click="changetype" v-if="dataAll.video_url_text.length">
				<view :class="type==0?'HCA':'viddeo'">企业图片</view>
				<view :class="type==1?'HCA':'viddeo'">企业视频</view>
			</view>
			<view class="all">
				<view class="header">
					<view class="header_center flexstart ">
						<image :src="dataAll.user.avatar_text" mode="" class="car_img"></image>
						<view class="header_right" style="width: 75%;">
							<view class="header_henan">{{dataAll.shop_name}}</view>
							<view class="flexleft header_three">
								<view class="header_VIP" v-if="dataAll.user.vip_status">VIP认证</view>
								<view class="header_gs" v-if="dataAll.user.qy_status==1">企业认证</view>
								<view class="header_gs" v-if="dataAll.user.qy_status==2">工商认证</view>
								<view class="header_pt" v-if="dataAll.user.platform_status==1">平台认证</view>
							</view>
							<view class="flexbetween">
								<view class="hui">浏览量{{dataAll.views}}</view>
								<view class="hui">收藏量{{dataAll.collect_num}}</view>
								<view class="hui">转发量{{dataAll.share_num}}</view>
							</view>
						</view>
					</view>
					<view class="header_center margin_top">
						<view class="strongtext">企业主营：{{dataAll.zyyw}}</view>
					</view>
				</view>
			</view>
			<u-tabs :list="list1" @click="onclick"></u-tabs>
			<!-- 专线 -->
			<view class="" v-if="tabcurrentid===0">
				<view class="flexcenter" style="margin-top: 0;" v-if="!zxdata.length">
					<view class="placeimage"></view>
				</view>
				<view class="nav_a  flex_wrap" v-if="zxdata.length">
					<view class="nav_b  " @click="jumpdetail('/pages/index/zhuanxianxq?id=',item.id)" v-for="item in zxdata"
						:key="item.id">
						<view class="flexleft" style="position: relative;">
							<view class="border_zhida" v-if="item.sfzz_status==0">直达</view>
							<view class="border_zhongzhuan" v-if="item.sfzz_status==1">中转</view>
							<view class="addresstext margin_right">{{item.sfcityinfo}}</view>
							<view class="huoche margin_right"></view>
							<view class="addresstext">{{item.ddcityinfo}}</view>
						</view>
						<!-- <view class="flexleft flexstart">
							<view class="left">
								<image :src="zxdata.user.avatar_text" mode="" class="car_img"></image>
							</view>
							<view class="right">
								<view class="flexbetween">
									<view class="right_henan">{{zxdata.shop.shop_name}}</view>
								</view>
								<view class="jianjie yhxiank">{{zxdata.shop.gsjj}}</view>
								<view class="flexleft header_three">
									<view class="header_VIP" v-if="zxdata.user.vip_status">VIP认证</view>
									<view class="header_gs" v-if="zxdata.user.qy_status==2">工商认证</view>
									<view class="header_pt" v-if="zxdata.user.qy_status==1">平台认证</view>
								</view>

							</view>
						</view> -->
						<!-- 地址 -->
						<view class="add ">
							<view class="number">{{item.cf_mobile}}</view>
							<view class="flexbetween">
								<view class="flexleft">
									<view class="address">{{item.shop.cityinfo}}{{item.shop.address}}</view>
									<view class="km">{{kmUnit(Number(item.distance))}}</view>
								</view>
								<view class="flexleft">
									<view class="locations dizhi" @click.stop="openmap(item)"></view>
									<view class="phone" @click.stop="phone(item.cf_mobile,1)"></view>
								</view>
							</view>
						</view>
						<view class="liu flexbetween">
							<view class="liulan">浏览：{{item.views}}</view>
							<view class="liulan">收藏：{{item.collect_num}}</view>
							<view class="liulan">拨打：{{item.call_num}}</view>
							<view class="liulan">转发：{{item.share_num}}</view>
						</view>
						<!-- <view class="section" v-if="zxdata.zxlist.length">
							<view class="flexbetween" @click.stop="changeshow">
								<view class="">专线列表</view>
								<view :class="zxdata.isshow?'xiarotate':'rightrotate'"></view>
							</view>
							<view class="flexbetween section_one"
								@click="jumpdetail('/pages/index/zhuanxianxq?id=',item.id)" v-if="zxdata.isshow"
								v-for="item in zxdata.zxlist" :key="item.id">
								<view class="border_zhida" v-if="!item.sfzz_status">直达</view>
								<view class="border_zhongzhuan" v-if="item.sfzz_status">中转</view>
								<view class="zhengzhou">{{item.sfcityinfo}}</view>
								<view class="greyleft"></view>
								<view class="zhengzhou">{{item.ddcityinfo}}</view>
							</view>
						</view> -->
					</view>
					<view class="footertextdaodi">老板！到底没数据了！</view>
				</view>

			</view>
			<view class="mainpadding">
				<!-- 供应需求 -->
				<view v-if="tabcurrentid==1">
					<view class="centers  flexleft flexcenter">
						<view class="all1" :class="lable==1?'gongying':' xuqui'" @click="changelable(1)">供应</view>
						<view class="alls1" :class="lable==2?'gongying':'xuqui'" @click="changelable(2)">需求</view>
					</view>
					<view class="flexcenter" style="margin-top: 0;" v-if="!list.data.length">
						<view class="placeimage"></view>
					</view>
					<view class="" v-if="list.data.length">
						<view class="center margin_top" v-for="item in list.data" :key="item.id"
							@click="jumpdetail('/pages/supply/gongyingxq?id=',item.id)">
							<view class="flexbetween flex_wrap">
								<view class="flexleft">
									<view class="image_ya">
										<image :src="item.user.avatar_text" mode=""></image>
									</view>
									<view class="center_zi ">
										<view class="word_hei">{{item.user.nickname}}</view>
										<view class="hui">{{item.createtime_text}}</view>
									</view>
								</view>
								<view class="flexleft">
									<view class="province_jiangsu">{{item.cityinfo}}</view>
								</view>
							</view>
							<view class="TV">
								<view class="hei margin_top">{{item.title}}</view>
							</view>
							<view class="hui">{{item.des}}</view>
							<!-- 图片 -->
							<view class="flexleft margin_top flex_wrap">
								<view class="item_image_box flexcenter" v-for="ite in item.images_text" :key="ite">
									<view class="item_image">
										<image :src="ite" mode=""></image>
									</view>
								</view>
							</view>
							<view class="flexbetween margin_top">
								<view class="liulan">浏览：{{item.views}}次</view>
								<view class="liulan">分享：{{item.share_num}}</view>
								<view class="liulan">{{lable==1?"求购":"供应"}}：{{item.num}}</view>
							</view>
						</view>
						<view class="footertextdaodi">老板！到底没数据了！</view>
					</view>

				</view>
				<!-- 招标 -->
				<view v-if="tabcurrentid==2">
					<view class="flexcenter" style="margin-top: 0;" v-if="!list.data.length">
						<view class="placeimage"></view>
					</view>
					<view class="" v-if="list.data.length">
						<view class="center margin_top" v-for="item in list.data" :key="item.id"
							@click="jumpdetail('/pages/index/zhaobiaoxmxq?id=',item.id)">
							<view class="flexbetween flex_wrap">
								<view class="flexleft">
									<view class="image_ya">
										<image :src="item.user.avatar_text" mode=""></image>
									</view>
									<view class="center_zi ">
										<view class="word_hei">{{item.user.nickname}}</view>
										<view class="hui">{{item.createtime_text}}</view>
									</view>
								</view>
								<view class="flexleft">
									<view class="province_jiangsu">{{item.cityinfo}}</view>
								</view>
							</view>
							<view class="TV">
								<view class="hei margin_top">{{item.title}}</view>
							</view>
							<view class="hui">{{item.des}}</view>
							<!-- 图片 -->
							<view class="flexleft margin_top flex_wrap">
								<view class="item_image_box flexcenter" v-for="ite in item.images_text" :key="ite">
									<view class="item_image">
										<image :src="ite" mode=""></image>
									</view>
								</view>
							</view>
						</view>
						<view class="footertextdaodi">老板！到底没数据了！</view>
					</view>
				</view>
				<!-- 招聘 -->
				<view v-if="tabcurrentid==3">
					<view class="centers  flexleft flexcenter">
						<view class="all1" :class="lablezp==1?'gongying':' xuqui'" @click="changelablezp(1)">招聘</view>
						<view class="alls1" :class="lablezp==2?'gongying':'xuqui'" @click="changelablezp(2)">求职</view>
					</view>
					<view class="flexcenter" style="margin-top: 0;" v-if="!list.data.length">
						<view class="placeimage"></view>
					</view>
					<view class="" v-if="list.data.length">
						<view class="center margin_top" v-if="lablezp==1" v-for="item in list.data" :key="item.id"
							@click="jumpdetail('/pages/index/zhiwiexiangqing?id=',item.id)">
							<view class="flexbetween flex_wrap">
								<view class="flexleft">
									<view class="image_ya">
										<image :src="item.user.avatar_text" mode=""></image>
									</view>
									<view class="center_zi ">
										<view class="word_hei">{{item.user.nickname}}263</view>
										<view class="hui">{{item.createtime_text}}</view>
									</view>
								</view>
								<view class="flexleft">
									<view class="province_jiangsu">{{item.cityinfo}}</view>
								</view>
							</view>
							<view class="flexleft flex_wrap">
								<view class="province_jiangsu margin_top1 margin_right1" v-for="ite in item.flags"
									:key="ite">{{ite.name}}</view>
							</view>
							<view class="flexbetween">
								<view class="hei margin_top">{{item.title}}</view>
								<view class="strongtext quigou">{{item.xz}}</view>
							</view>
							<view class="hui">{{item.des}}</view>
							<!-- 图片 -->
							<view class="flexleft margin_top flex_wrap">
								<view class="item_image_box flexcenter" v-for="ite in item.images_text" :key="ite">
									<view class="item_image">
										<image :src="ite" mode=""></image>
									</view>
								</view>
							</view>
						</view>
						<view class="center margin_top" v-if="lablezp==2" v-for="item in list.data" :key="item.id"
							@click="jumpdetail('/pages/index/zhaopingrxq?id=',item.id)">
							<view class="flexbetween flex_wrap">
								<view class="flexleft">
									<view class="image_ya">
										<image :src="item.user.avatar_text" mode=""></image>
									</view>
									<view class="center_zi ">
										<view class="word_hei">{{item.user.nickname}}</view>
										<view class="hui">{{item.createtime_text}}</view>
									</view>
								</view>
								<view class="flexleft">
									<view class="province_jiangsu">{{item.cityinfo}}</view>
								</view>
							</view>
							<view class="flexleft flex_wrap">
								<view class="province_jiangsu margin_top1 margin_right1" v-for="ite in item.flags"
									:key="ite">{{ite.name}}</view>
							</view>
							<view class="flexbetween">
								<view class="hei margin_top">{{item.title}}</view>
								<view class="strongtext quigou">{{item.xz}}</view>
							</view>
							<view class="hui">{{item.des}}</view>
						</view>
						<view class="footertextdaodi">老板！到底没数据了！</view>
					</view>

				</view>
				<!-- 商品 -->
				<view class="" v-if="tabcurrentid==4">
					<view class="flexcenter" style="margin-top: 0;" v-if="!list.data.length">
						<view class="placeimage"></view>
					</view>
					<view class="" v-if="list.data.length">
						<view class="flexbetween flex_wrap">
							<view class="shangpbox margin_top" v-for="item in list.data" :key="item.id"
								@click="jumpdetail('/pages/shopping/shangpinxq?id=',item.id)">
								<view class="shangptp">
									<image :src="item.image_text" mode=""></image>
								</view>
								<view class="mainpadding ffffff baibox">
									<view class="ershil lianghang">{{item.title}}</view>
									<view class="flexbetween margin_top">
										<view class="price">￥{{item.price}}</view>
										<view class="nostrongtext">{{item.sales}}人付款</view>
									</view>
								</view>
							</view>
						</view>
						<view class="footertextdaodi">老板！到底没数据了！</view>
					</view>

				</view>
				<!-- 资讯 -->
				<view class="" v-if="tabcurrentid==5">
					<view class="flexcenter" style="margin-top: 0;" v-if="!list.data.length">
						<view class="placeimage"></view>
					</view>
					<view class="" v-if="list.data.length">
						<view class="center margin_top" v-for="item in list.data" :key="item.id"
							@click="jumpdetail('/pages/index/zixunxq?id=',item.id)">
							<view class="flexbetween bottomline">
								<view class="">{{item.nickname_text}}</view>
								<view class="">{{item.createtime_text}}</view>
							</view>
							<view class="flexbetween">
								<view style="flex: 3.4;" class="margin_right">
									<view class="lianghang zdytext">{{item.title}}</view>
									<view class="flexleft flex_wrap huitext" style="margin-top: 10rpx;">
										<view class="margin_right1">阅读{{item.views}}</view>
										<view class="margin_right1">点赞{{item.dz_num}}</view>
										<view class="margin_right1">收藏{{item.collect_num}}</view>
										<view class="margin_right1">分享{{item.share_num}}</view>
									</view>
								</view>
								<view class="rightimg">
									<image :src="item.images_text[0]" mode=""></image>
								</view>
							</view>
						</view>
						<view class="footertextdaodi">老板！到底没数据了！</view>
					</view>
				</view>
				<view class="" v-if="tabcurrentid==6">
					<view class="flexcenter" style="margin-top: 0;" v-if="!list.data.length">
						<view class="placeimage"></view>
					</view>
					<view class="" v-if="list.data.length">
						<view class="center margin_top" v-for="item in list.data" :key="item.id"
							@click="jumpdetail('/pages/index/luntanxq?id=',item.id)">
							<view class="flexbetween flex_wrap">
								<view class="flexleft">
									<view class="image_ya">
										<image :src="item.user.avatar_text" mode=""></image>
									</view>
									<view class="center_zi ">
										<view class="word_hei">{{item.user.nickname}}</view>
										<view class="hui">{{item.createtime_text}}</view>
									</view>
								</view>
							</view>
							<view class="hei center_shuju margin_top">{{item.title}}</view>
							<view class="TV">
								<view class="hui margin_top lianghang">{{item.des}}</view>
							</view>
							<!-- 图片 -->
							<view class="flexleft margin_top flex_wrap">
								<view class="item_image_box flexcenter" v-for="ite in item.images_text">
									<view class="item_image">
										<image :src="ite" mode=""></image>
									</view>
								</view>
							</view>
						</view>
						<view class="footertextdaodi">老板！到底没数据了！</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				type: 0,
				current: 0, //0专线,1供应需求,2招标,3招聘
				currentNum: 0, //轮播图当前位置
				list1: [],
				listid: "",
				dataAll: {},
				lat: "",
				lng: "",
				list4: [],
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				lable: 1,
				lablezp: 1,
				zxdata: {},
				pageshow: false,
				tabcurrentid: "",
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getlocation()
		},
		onShareAppMessage: function(options) {
			return {
				title: '物流托盘包装交易平台',
				imageUrl: '',
				path: '/pages/index/qiyexiangqing?invite_code=' + uni.getStorageSync("invite_code")
			}
		},
		onShareTimeline: function() {
			return {
				title: '物流托盘包装交易平台',
				imageUrl: '',
				path: '/pages/index/qiyexiangqing?invite_code=' + uni.getStorageSync("invite_code")
			}
		},
		methods: {
			jumpdetail(urls, id) {
				console.log(urls, id, "地址+id")
				uni.navigateTo({
					url: urls + id
				})
			},
			changeshow() {
				this.zxdata.isshow = !this.zxdata.isshow
			},
			kmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			},
			phone(p, value) {
				if (value == 1) {
					this.addboda()
				}
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {})
			},
			addboda() {
				httpRequest.request('/api/zx/addZXListCallNum', 'GET', {
					id: this.zxdata.id,
				}, false, false, true).then(res => {})
			},
			openmap(item) {
				uni.openLocation({
					latitude: Number(item.shop.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(item.shop.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: item.shop.shop_name, //即将传到高德或腾讯地图的店铺名称
					address: item.shop.cityinfo + item.shop.address, //即将传到高德或腾讯地图的详细地址
					scale: 18
				})
			},
			// 切换供需
			changelable(value) {
				this.lable = value
				this.init()
			},
			// 切换招聘
			changelablezp(value) {
				this.lablezp = value
				this.init()
			},
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						//逆地址解析  坐标转地址信息
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.getdetail()
					}
				});
			},
			// 获取优选仓库列表
			init(isPage, page) {
				let _this = this;
				let url = ""
				let data = {}
				if (this.tabcurrentid === 0) { //专线
					url = "/api/Company/myShopZxList"
					data = {
						page: page || 1,
						limit: _this.limit,
						lat: this.lat,
						lng: this.lng,
						shop_apply_id: this.listid
					}
				}
				if (this.tabcurrentid == 1) { //供应，需求
					url = "/api/Company/shopGxList"
					data = {
						page: page || 1,
						limit: _this.limit,
						type: this.lable,
						user_id: this.dataAll.user_id
					}
				}
				if (this.tabcurrentid == 2) { //招标
					url = "/api/Company/shopBiddingList"
					data = {
						page: page || 1,
						limit: _this.limit,
						user_id: this.dataAll.user_id
					}
				}
				if (this.tabcurrentid == 3) { //招聘
					url = "/api/Company/shopZpList"
					data = {
						page: page || 1,
						limit: _this.limit,
						type: this.lablezp,
						user_id: this.dataAll.user_id
					}
				}
				if (this.tabcurrentid == 4) { //商品
					url = "/api/Company/shopGoodsList"
					data = {
						page: page || 1,
						limit: _this.limit,
						shop_apply_id: this.listid
					}
				}
				if (this.tabcurrentid == 5) { //资讯
					url = "/api/info/index"
					data = {
						page: page || 1,
						limit: _this.limit,
						user_id: this.dataAll.user_id
					}
				}
				if (this.tabcurrentid == 6) { //论坛
					url = "/api/Forum/getList"
					data = {
						page: page || 1,
						limit: _this.limit,
						user_id: this.dataAll.user_id
					}
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1 && res.data) {
						if (this.tabcurrentid == 0) {
							this.$set(res.data, "isshow", false)
							this.zxdata = res.data.data
							console.log(this.zxdata)
						} else {
							let resList = res.data;
							let dataList = _this.list;
							if (isPage == true) {
								_this.list.data = dataList.data.concat(resList.data);
							} else {
								this.list = res.data
								_this.list.data = resList.data;
							}
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				if (this.tabcurrentid == 0) {
					return false
				}
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			previewimg(index, arr) {
				let i = arr; //获取当前页面的轮播图数据
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			getdetail() {
				httpRequest.request('/api/Company/detail', 'GET', {
					id: this.listid,
					lat: this.lat,
					lng: this.lng
				}, false, false, true).then(res => {
					this.pageshow = true
					if (res.code == 1) {
						let arr = []
						let zx = res.data
						// if (zx.bgs_image_text.length != 0) {
						// 	arr = [...arr, ...zx.bgs_image_text]
						// }
						// if (zx.ck_image_text.length != 0) {
						// 	arr = [...arr, ...zx.ck_image_text]
						// }
						// if (zx.fgs2_image_text.length != 0) {
						// 	arr = [...arr, ...zx.fgs2_image_text]
						// }
						// if (zx.fgs1_image_text.length != 0) {
						// 	arr = [...arr, ...zx.fgs1_image_text]
						// }
						// if (zx.qt_image_text.length != 0) {
						// 	arr = [...arr, ...zx.qt_image_text]
						// }
						if (zx.images_text.length != 0) {
							arr = zx.images_text
						}

						let data = res.data.infonum
						if (data.zx_num != 0) {
							this.list1.push({
								name: "专线",
								id: 0,
							})
						}
						if (data.gx_num != 0) {
							this.list1.push({
								name: "供求",
								id: 1,
							})
						}
						if (data.bidding_num != 0) {
							this.list1.push({
								name: "招标",
								id: 2,
							})
						}
						if (data.zp_num != 0) {
							this.list1.push({
								name: "招聘",
								id: 3,
							})
						}
						if (data.goods_num != 0) {
							this.list1.push({
								name: "商品",
								id: 4,
							})
						}
						if (data.info_num != 0) {
							this.list1.push({
								name: "资讯",
								id: 5,
							})
						}
						if (data.forum_num != 0) {
							this.list1.push({
								name: "论坛",
								id: 6,
							})
						}
						if (this.list1.length) {
							this.tabcurrentid = this.list1[0].id
						}
						zx.video_url_text = zx.video_url_text ? [zx.video_url_text] : []
						this.list4 = arr
						this.dataAll = res.data
						this.init()
					}

				})
			},
			onclick(e) { //顶部
				this.current = e.index;
				this.tabcurrentid = e.id
				this.init();
			},
			changetype() {
				this.type = this.type == 0 ? 1 : 0
			},
		}
	}
</script>

<style lang="scss" scoped>
	.addresstext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		text-align: center;
		width: 200rpx;
	}

	.rightimg {
		width: 130rpx;
		height: 130rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
	}

	.nostrongtext2 {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.price {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FD463E;
	}

	.shangptp {
		width: 338rpx;
		border-radius: 11rpx 11rpx 0 0;
		height: 338rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 11rpx 11rpx 0 0;
		}
	}

	.shangpbox {
		width: 48%;
	}

	.image_ya {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}

	.bottomline {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, .1);
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.huitext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.zdytext {
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
	}

	.item_image {
		width: 144rpx;
		height: 144rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.center {
		background-color: #fff;
		padding: 35rpx 37rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.section_one {
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid RGBA(233, 233, 233, 1);
	}

	.section_two {
		margin-top: 30rpx;
	}

	.border {
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
	}

	.number {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.zhengzhou {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		width: 200rpx;
	}

	.section {
		background: #F1F1F1;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		padding: 32rpx 25rpx;
		margin-top: 30rpx;
	}

	.background {
		width: 100%;
		height: 437rpx;
		background-size: 100% 100%;
	}

	.content {
		// padding-bottom: 200rpx;
	}

	.footer_right {
		padding-right: 46rpx;
	}

	.all1 {
		background: #fFF;
		border-radius: 11rpx 0rpx 0rpx 11rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding: 11rpx 38rpx;
		border: 2rpx solid #228DFF;
	}

	.alls1 {
		background: #228DFF;
		border-radius: 0rpx 11rpx 11rpx 0rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ffff;
		padding: 11rpx 38rpx;
		border: 2rpx solid #228DFF;
	}

	.footer_stars {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;

	}

	.footer_star {
		padding-left: 66rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.phones {
		background: #228DFF;
		border-radius: 13rpx 13rpx 13rpx 13rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		padding: 21rpx 42rpx 21rpx 43rpx;
	}

	.mainpadding {
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.all {
		padding: 30rpx 24rpx;
	}

	.zi {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.henan {
		margin-right: 22rpx;
	}

	.centertop {
		position: absolute;
		top: 360rpx;
		left: 24rpx;
		width: 300rpx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 42rpx 42rpx 42rpx 42rpx;

		.HCA {
			width: 150rpx;
			font-size: 20rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #228DFF;
			padding: 8rpx 20rpx 8rpx 30rpx;
			background: #FFFFFF;
			text-align: center;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			// position: relative;
			// left: 15rpx;
			box-sizing: border-box;
		}

		.viddeo {
			width: 150rpx;
			font-size: 20rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #fff;
			text-align: center;
			padding: 8rpx 20rpx 8rpx 30rpx;
			border-radius: 42rpx 42rpx 42rpx 42rpx;
			box-sizing: border-box;
		}
	}

	.header_center {
		padding: 30rpx 30rpx;
		background-color: #fff;
	}

	.header_right {
		padding-left: 19rpx;
	}

	.header_henan {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.header_three {
		margin-top: 20rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		margin-left: 18rpx;

		.header_VIP {
			color: #FFA500;
			padding: 4rpx 16rpx 4rpx 16rpx;
			background: RGBA(255, 246, 230, 1);
			border-radius: 27rpx 27rpx 27rpx 27rpx;
			margin-right: 30rpx;
		}

		.header_gs {
			color: #228DFF;
			padding: 4rpx 16rpx 4rpx 16rpx;
			background: RGBA(233, 244, 255, 1);
			border-radius: 27rpx 27rpx 27rpx 27rpx;
			margin-right: 30rpx;
		}

		.header_pt {
			color: #FD463E;
			padding: 4rpx 16rpx 4rpx 16rpx;
			background: RGBA(255, 237, 236, 1);
			border-radius: 27rpx 27rpx 27rpx 27rpx;
			margin-right: 30rpx;
		}
	}

	.xuqui {
		background: #fff;
		color: #228DFF;
		border: 2rpx solid #228DFF;
	}

	.gongying {
		background: #228DFF;
		color: #ffff;
		border: 2rpx solid #228DFF;
	}

	.hui {
		margin-top: 15rpx;
	}

	.footer {
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		bottom: 0rpx;
		background-color: #fff;
		padding: 30rpx 46rpx;
		padding-bottom: 57rpx;
	}

	.collect {
		margin-top: 13rpx;
	}

	.share_zi {
		margin-top: 13rpx;
	}

	.nav_a {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 30rpx 24rpx;
	}

	.xiangqing {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		padding-right: 11rpx;
		padding-left: 261rpx;
	}

	.xian {
		border-bottom: 2rpx solid RGBA(247, 247, 247, 1);
	}

	.car_img {
		width: 132rpx;
		height: 132rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.nav_b {
		padding: 36rpx 32rpx;
		background-color: #fff;
	}

	.right_henan {
		width: 360rpx;
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
		padding-left: 19rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.jianjie {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		padding-left: 19rpx;
		margin-top: 5rpx;
	}

	.address {
		width: 280rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.km {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #228DFF;
		padding-left: 16rpx;
	}

	.add {
		margin-top: 29rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		padding-bottom: 36rpx;
	}

	.dizhi {
		margin-right: 22rpx;
	}

	.liu {
		padding-top: 30rpx;
	}

	.liulan {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}
</style>